<template>
  <div class="add_exam">
    <el-form ref="examForm" :model="query" label-width="80px" :rules="rules">
      <el-form-item label="考试名称" prop="exam_name">
        <el-input v-model="query.exam_name" placeholder="请输入考试名称" />
      </el-form-item>
      <el-form-item label="考试类型" prop="exam_type">
        <el-radio-group v-model="query.exam_type">
          <el-radio :label="1">阶段考试</el-radio>
          <el-radio :label="2">综合考试</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="锁屏方式" prop="lock_screen">
        <el-radio-group v-model="query.lock_screen">
          <el-radio :label="1">不锁屏</el-radio>
          <el-radio :label="2">锁屏</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="归属学科" prop="subject_id">
        <el-select
          v-model="query.subject_id"
          placeholder="归属学科"
          clearable
          @change="changeSubject"
        >
          <el-option
            v-for="item in treeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select></el-form-item>
      <el-form-item label="归属目录" prop="directory_id">
        <el-select
          v-model="query.directory_id"
          placeholder="归属目录"
          clearable
          @change="getPaperList"
        >
          <el-option
            v-for="item in directoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="考试时常">
        <el-input-number v-model="query.exam_time" :min="1" :max="120" label="描述文字" />
      </el-form-item>
      <el-form-item label="考试信息" prop="main_paper_id">
        <el-select v-model="query.main_paper_id" placeholder="选择主考试卷" :disabled="!query.directory_id">
          <el-option
            v-for="item in paperList"
            :key="item.id"
            :label="item.paper_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="cancelSubmit">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { addExam, getPaperList } from '@/api/exam'
const defaultItem = {
  directory_id: '',
  exam_name: '',
  exam_time: 30,
  exam_type: 1,
  lock_screen: 1,
  main_paper_id: '',
  subject_id: ''
}
export default {
  data() {
    return {
      num: 30,
      query: { ...defaultItem },
      paperList: [],
      rules: {
        subject_id: [{ required: true, message: '必填', trigger: 'blur' }],
        exam_name: [{ required: true, message: '必填', trigger: 'blur' }],
        exam_type: [{ required: true, message: '必填', trigger: 'blur' }],
        lock_screen: [{ required: true, message: '必填', trigger: 'blur' }],
        directory_id: [{ required: true, message: '必填', trigger: 'blur' }],
        main_paper_id: [{ required: true, message: '必填', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapState('paper', ['treeList']),
    directoryList() {
      if (!this.query.subject_id) {
        return []
      } else {
        const result = this.treeList.find(val => val.id === this.query.subject_id)
        return result.children
      }
    }
  },
  methods: {
    async onSubmit() {
      try {
        await this.$refs.examForm.validate()
        const res = await addExam({ ...this.query })
        this.$message.success('增加信息成功')
        this.query = { ...defaultItem }
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    cancelSubmit() {
      this.query = { ...defaultItem }
      console.log(this.paperList)
    },
    async getPaperList() {
      const { data } = await getPaperList({ subject_id: this.query.subject_id, directory_id: this.query.directory_id, show_state: 1 })
      this.paperList = data.list
    },
    changeSubject() {
      this.query.directory_id = ''
    }
  }
}
</script>

<style scoped lang='scss'>
.add_exam{
  margin: 0 250px;
}
</style>
